@import "mixins/mixins";
@import "common/var";
@import "button";

@include b(calendar) {
  background-color: #fff;

  @include e(header) {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: $--table-border;
  }

  @include e(title) {
    color: #000000;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 12px 20px;
  }

  @include e(body) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 12px 20px 35px;
  }
}

@include b(calendar-day) {
  box-sizing: border-box;
  padding: 8px;
  height: $--calendar-cell-width;
  border-top: $--calendar-border;
  &:hover {
    cursor: pointer;
    background-color: $--calendar-selected-background-color;
  }

  @include when(selected) {
    background-color: $--calendar-selected-background-color;
  }
}

@include b(calendar-week) {
  box-sizing: border-box;
  padding: 8px;
}
